<template>
    <div>
        <div style="text-align: center; margin: 20px auto;">
            <input type="text" style="width: 200px;" v-model="query" @keypress="checkEs">
            <el-button @click="checkEs">查询</el-button>
        </div>
        
    </div>
    <div v-for="(item, index) in result" :key="index" class="highlight">
        <h3 v-html="item.name"></h3>
        <em v-html="item.course"></em>
        <div v-html="item.prevention"></div>
    </div>
</template>

<script setup>
import { ref, nextTick } from 'vue';
import { test} from '@/requests/index';

const result = ref({
    name: "",
    course: "",
    prevention: ""
});
const query =  ref();
const checkEs = async()=> {
    const res = await test({"query": query.value});
    if (res.status === 2000){
        await nextTick();
        result.value = res.data;
    }else{
        console.log(res.data)
    }
}
</script>

<style scoped>

.highlight {
    margin: 40px;
    
}
</style>